<!--
 * @Description: 
 * @Date: 2022-02-16 10:19:22
 * @LastEditTime: 2022-02-17 17:49:51
 * @FilePath: /vue3-element-plus/src/views/components/autocomplete/index.vue
 * @Author: Devin
-->
<template>
  <div class="components">
    <el-card>
      <template #header>
        <div class="el-card-header">普通的输入框自动补全</div>
        <div class="el-card-header-tip">
          内部实现了<code>fetch-suggestions</code>不在需要关注设置下拉框的过程，只需传递一个下拉数组进去。
        </div>
      </template>
      <CcAutocomplete
        v-model="state1"
        :autocompleteList="list"
        class="inline-input"
        placeholder="Please Input"
        @select="handleSelect"
      />
      <Code></Code>
    </el-card>
    <el-card>
      <template #header>
        <div class="el-card-header">特殊类型的输入框自动补全</div>
        <div class="el-card-header-tip">
          设置<code>autocompleteType="email"</code>即可实现邮箱提示，可修改默认的邮箱后缀，设置<code>emailAutocompleteList=[{value:'@qq.com'},...]</code>即可
        </div>
      </template>
      <CcAutocomplete
        v-model="state"
        autocompleteType="email"
        class="inline-input"
        placeholder="Please Input"
        @select="handleSelect"
      />
      <Code></Code>
    </el-card>
    <el-card>
      <template #header>
        <div class="el-card-header">远程请求自动补全列表模式</div>
        <div class="el-card-header-tip">
          设置<code>autocompleteType="email"</code>即可实现邮箱提示，可修改默认的邮箱后缀，设置<code>emailAutocompleteList=[{value:'@qq.com'},...]</code>即可
        </div>
      </template>
      <CcAutocomplete
        v-model="state"
        listType="remote"
        field="name"
        class="inline-input"
        placeholder="Please Input"
        @select="handleSelect"
      />
      <Code></Code>
    </el-card>
  </div>
</template>

<script lang='ts'>
import { getInputAutoList } from '@/api/public';
import { defineComponent, onMounted, reactive, ref, toRefs } from '@vue/runtime-core';
export default defineComponent({
  name: '',
  components: {},
  setup() {
    interface RestaurantItem {
      value: string;
      link: string;
    }
    const state = reactive({
      state1: '',
      state: '',
      list: [
        { value: 'vue', link: 'https://github.com/vuejs/vue' },
        { value: 'element', link: 'https://github.com/ElemeFE/element' },
        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
        { value: 'babel', link: 'https://github.com/babel/babel' }
      ]
    });

    const handleSelect = (item: RestaurantItem) => {};
    return { ...toRefs(state), handleSelect };
  }
});
</script>
<style scoped lang='scss'>
</style>